<template>
	<view>
		<!-- 头部 -->
		<uni-nav-bar leftWidth='200rpx' rightWidth='200rpx' height="130rpx" left-icon="left" leftText="返回" title="生活缴费"
			@clickLeft="$utils.ret()" />
		<!-- 全部 -->
		<view class="all_box">
			<view class="all">
				全部
			</view>
			<view class="mold">
				<span>缴费类型</span><i class="iconfont icon-sanjiaoxing jiao"></i>
			</view>
		</view>
		<!-- 单元时间 -->
		<view class="room_number">
			<view class="room">
				<span>清水湾1号楼1单元2203</span><uni-icons type="down"></uni-icons>
			</view>
			<view class="dates">
				<span>2021-09</span><i class="iconfont icon-sanjiaoxing san"></i>
			</view>
		</view>
		<view style="padding-bottom: 10rpx;">
			<!-- 缴费账单 -->
			<view class="bill_box">
				<view class="bill">
					<view class="cost">
						物业费账单
					</view>
					<view class="room_num">
						<view class="room_key">
							房号
						</view>
						<view class="num">
							1201
						</view>
					</view>
					<view class="unit">
						<view class="single">
							账单
						</view>
						<view class="date">
							2021-8-1至2021-10-1
						</view>
					</view>
					<view class="figure">
						<view class="amont">
							账单金额
						</view>
						<view class="coin">
							￥360.00元
						</view>
					</view>
					<view class="payment_time">
						<view class="time">
							缴费时间
						</view>
						<view class="year">
							2021-10-10
						</view>
					</view>
					<view class="payment_method">
						<view class="way">
							付款方式
						</view>
						<view class="pay">
							微信支付
						</view>
					</view>
				</view>
				<view class="bill">
					<view class="cost">
						物业费账单
					</view>
					<view class="room_num">
						<view class="room_key">
							房号
						</view>
						<view class="num">
							1201
						</view>
					</view>
					<view class="unit">
						<view class="single">
							账单
						</view>
						<view class="date">
							2021-8-1至2021-10-1
						</view>
					</view>
					<view class="figure">
						<view class="amont">
							账单金额
						</view>
						<view class="coin">
							￥360.00元
						</view>
					</view>
					<view class="payment_time">
						<view class="time">
							缴费时间
						</view>
						<view class="year">
							2021-10-10
						</view>
					</view>
					<view class="payment_method">
						<view class="way">
							付款方式
						</view>
						<view class="pay">
							微信支付
						</view>
					</view>
				</view>
				<view class="bill">
					<view class="cost">
						物业费账单
					</view>
					<view class="room_num">
						<view class="room_key">
							房号
						</view>
						<view class="num">
							1201
						</view>
					</view>
					<view class="unit">
						<view class="single">
							账单
						</view>
						<view class="date">
							2021-8-1至2021-10-1
						</view>
					</view>
					<view class="figure">
						<view class="amont">
							账单金额
						</view>
						<view class="coin">
							￥360.00元
						</view>
					</view>
					<view class="payment_time">
						<view class="time">
							缴费时间
						</view>
						<view class="year">
							2021-10-10
						</view>
					</view>
					<view class="payment_method">
						<view class="way">
							付款方式
						</view>
						<view class="pay">
							微信支付
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


2024-03-12 20:25:15
<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>
<style>
	page {
		width: 100%;
		height: 100vh;
		background-color: aliceblue
	}
	/deep/.uni-navbar__content {
		border: none;
	}
	/deep/.uni-nav-bar-text {
		font-size: 25rpx !important;
	}
	/deep/.uni-navbar-btn-text span {
		font-size: 20rpx !important;
	}
	/* 全部 */
	.all_box {
		width: 100%;
		height: 90rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
	}
	.all {
		height: 90rpx;
		line-height: 90rpx;
		color: #268afe;
		font-size: 25rpx;
		margin-left: 40rpx;
	}
	.mold {
		height: 90rpx;
		line-height: 90rpx;
		padding-right: 15rpx;
		font-size: 25rpx;
		color: #333333;
	}
	.jiao {
		font-size: 15rpx;
		padding-left: 10rpx;
	}
	/* 单元 时间 */
	.room_number {
		height: 105rpx;
		display: flex;
		justify-content: space-between;
	}
	.room {
		height: 105rpx;
	}
	.room span {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 30rpx;
		color: #0f0f0f;
		padding-left: 25rpx;
	}
	.room .icon {
		height: 105rpx;
		line-height: 105rpx;
		padding-left: 20rpx;
	}
	.dates {
		height: 105rpx;
		line-height: 105rpx;
		padding-right: 25rpx;
	}
	.dates span {
		height: 105rpx;
		line-height: 105rpx;
		font-size: 25rpx;
		color: #0f0f0f;
	}
	.san {
		font-size: 15rpx;
		padding-left: 20rpx;
	}
	/* 缴费账单 */
	.bill_box {
		margin-bottom: 10rpx;
	}
	.bill {
		height: 425rpx;
		background-color: white;
		margin: 0 10rpx 15rpx;
		border-radius: 10rpx;
	}
	.cost {
		height: 80rpx;
		margin: 0 38rpx;
		border-bottom: 1px solid #eeeeee;
		line-height: 80rpx;
		font-size: 25rpx;
	}
	.room_num {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}
	.room_key {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.num {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.unit {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}
	.single {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.date {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.figure {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}
	.amont {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.coin {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.payment_time {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}
	.time {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.year {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.payment_method {
		height: 65rpx;
		margin: 0 38rpx;
		display: flex;
		justify-content: space-between;
	}
	.way {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
	.pay {
		height: 65rpx;
		font-size: 25rpx;
		line-height: 95rpx;
	}
</style>